<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('newcrumbs.crumbsThr')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('proManage.crumbsThree')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- ------------搜索查询栏开始-------------- -->
    <search :searchData="searchData" @search="search" :searchRight="true"></search>
    <!-- ------------ 搜索查询栏结束 -------------- -->
    <el-row class="list_operation">
      <el-button v-if="$store.state.common.permiss.helpcenter.includes('add')" type="primary" @click.stop="onAdd">+{{$t('proManage.crumbsThree')}}</el-button>
    </el-row>
    <div class="table" v-if="true">
      <el-table :data="tableData" size="small" stripe>
        <el-table-column align="center" prop="id" :label="$t('proManage.faqId')" >
          </el-table-column>
          <el-table-column align="center" prop="title" :label="$t('proManage.faqTitle')" >
          </el-table-column>
          <el-table-column align="center" prop="answer" :label="$t('proManage.request')" >
          </el-table-column>
          <el-table-column align="center" prop="type" :label="$t('proManage.faqState')" >
            <template slot-scope="scope">
              <span v-if="scope.row.type!=''">{{scope.row.type==1?$t('proManage.faqSelect.no1'):$t('proManage.faqSelect.no2')}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" :label="$t('proManage.joinTime')">
          </el-table-column>
        <el-table-column align="center" prop="operation" :label="$t('public.operation')">
          <template slot-scope="scope">
            <span v-if="$store.state.common.permiss.helpcenter.includes('edit')" class="table_opr" @click="onEdit(scope.row)">{{$t('public.no51')}}</span>
            <span class="table_opr" @click="onDel(scope.row.id)" v-if="$store.state.common.permiss.helpcenter.includes('del')">{{$t('idManage.del')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>
    <el-dialog :title="$t('public.addEdit')" :visible.sync="addVisible" width="600px">
      <el-form
        :model="addForm"
        size="small"
        status-icon
        ref="addForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm">
        <el-form-item :label="$t('proManage.faqState')" prop="type">
          <el-select size="small" v-model="addForm.type">
            <el-option v-for="item in typeOptions" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('proManage.faqTitle')" prop="title">
          <el-input type="textarea" rows="4" v-model="addForm.title" :placeholder="$t('userSuggest.placeholder')+'~'" maxlength="600"></el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.request')" prop="answer">
          <el-input type="textarea" rows="4" v-model="addForm.answer" :placeholder="$t('userSuggest.placeholder')+'~'" maxlength="600"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('addForm')">{{$t('public.no41')}}</el-button>
          <el-button @click="close">{{$t('public.no50')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="foot"></div>
  </div>
</template>
<script>
export default {
  data() {
    const searchData=[
      {
        type: 'select',
        label: 'proManage.faqState',
        attr: 'type',
        option: this.$store.state.options.faq_option,
        value: '',
        langFlag: true,
      }
    ]
    return {
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      searchData:searchData,
      tableData: [], // 用户信息数据模拟
      addVisible: false,
      typeOptions:this.$store.state.options.faq_option,
      addForm: {
        id:'',
        title: '',
        answer: '',
        type: '',
      },
      searchForm:{
        type:''
      },
      rules: {
        title: [{ required: true, message: this.$t("login.required"), trigger: 'blur' }],
        answer: [{ required: true, message: this.$t("login.required"), trigger: 'blur' }],
        type: [{ required: true, message: this.$t("login.required"), trigger: 'change' }],
      }
    };
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search(search) { // 搜索
      this.searchForm = {
        type:search.type
      };
      this.pagination.currentPage = 1;
      this.flag = false;
      this.getTableData();
    },
    onEdit(row) {
        this.addForm.id=row.id;
        this.addForm.title=row.title;
        this.addForm.answer=row.answer;
        this.addForm.type=row.type;
        this.addForm.appPackage=row.appPackage;
        this.addVisible = true;
    },
    submitForm(formName) {
    let option = {
        param: {
          ...this.addForm
        }       
      }
      let actionUrl=this.addForm.id?this.$action.product_questionUpdate:this.$action.product_questionSave;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post(actionUrl, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(res.message);
              this.close();
              this.getTableData();
            }else{
              this.$globalMsg.error(res.message)
            }
          })
        }
      })
    },
    onAdd() {
      this.addForm.id="";
      this.addVisible = true;
    },
    getTableData() {
      // 获取列表数据
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param:{
          ...this.searchForm
        }
      };
      this.$axios.post(this.$action.product_questionlist, option).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.pagination.total = res.data.total;
          } else {
            this.$globalMsg.error(res.message);
          }
        });
    },
    close() {
      this.addVisible = false;
      this.$refs.addForm.resetFields();
    },
    onDel(id){
      this.$confirm(this.$t('proManage.delFaq'), this.$t('public.del'), {
        type: "warning"
      })
      .then(() => {
        let option = {
          param:{
            id:id
          }
        }
        this.$axios.post(this.$action.product_questionDel,option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getTableData();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    }
  },
  mounted() { 
    this.getTableData(); 
  }
};
</script>
<style lang="scss" scoped>

</style>